<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData(true)"
      @reset="initData(true)"
      ><template #plus-field-warehouseId>
        <k-select-http
          v-model="queryform.warehouseId"
          paramsKey="searchValue"
          :immediately="true"
          :httpfn="getWarehouseList"
          :keyprops="{ label: 'name', value: 'warehouseId' }"
        /> </template
    ></PlusSearch>
    <div class="mb-2">
      <btnExport
        :queryform="queryform"
        :exportApi="exportApi"
        downloadName="组织数据"
      />
    </div>
    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      row-key="userId"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    />
  </main-box>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { ElMessageBox, ElMessage, formatter } from "element-plus";
import { type PlusColumn, PlusSearch } from "plus-pro-components";

import btnExport from "@/components/btnExport/index.vue";
import kSelectHttp from "@/components/k-select-http/index.vue";
import { allListApi as getWarehouseList } from "@/api/warehouse";
import { listApi, exportApi } from "@/api/system/dept";

/* 查询表单 */
const queryform = ref({ warehouseId: "", searchValue: "" });
const formConfig: PlusColumn[] = [
  { label: "工具室", prop: "warehouseId", slot: "warehouseId" },
  {
    label: "组织名称",
    prop: "searchValue"
  }
];

/* 表格数据 */
const tableRef = ref<any>();
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  {
    label: "一级组织名称",
    prop: "firstDept",
    formatter: ({ firstDept }) => firstDept?.deptName ?? ""
  },
  {
    label: "二级组织名称",
    prop: "secondDept",
    formatter: ({ secondDept }) => secondDept?.deptName ?? ""
  },
  {
    label: "三级组织名称",
    prop: "thirdDept",
    formatter: ({ thirdDept }) => thirdDept?.deptName ?? ""
  },
  { label: "工具室", prop: "warehouseName" },
  { label: "添加时间", prop: "createTime" }
];

const initData = (needInit = true) => {
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    ...queryform.value,
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize
  };

  listApi(params).then(res => {
    tableData.value = [...res.rows];
    pagination.total = Number(res.total);
  });
};
initData();

/* 表格操作 */
const handleSetting = row => {};
const handleDel = row => {
  ElMessageBox.confirm("您确认要删除该组织吗？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      ElMessage.success("删除成功");
    })
    .catch(() => {});
};
</script>
